<template>
    <div>
        <div style="margin-bottom: 10px;">
            邮箱：<el-input v-model="email" style="width: 100%" placeholder="请输入邮箱" />
        </div>
        <div style="margin-bottom: 10px;">
            用户名：<el-input v-model="name" style="width: 100%" placeholder="请输入用户名" />
        </div>
        <div>
            密码：<el-input v-model="password" style="width: 100%" show-password placeholder="请输入密码" />
        </div>
        <div>
            确认密码：<el-input v-model="confirmPassword" style="width: 100%" show-password placeholder="请输入确认密码" />
        </div>
        <div>
            验证码<el-input v-model="code" style="width: 100%" placeholder="请输入验证码" />
        </div>
        <span style="font-size: small;position: relative;left: 66%;">忘记密码</span>
        <div style="margin-top: 10px;width: 100%;text-align: center;">
            <el-button type="primary" :disabled="reSend == '发送验证码' ? false : true" @click="send()">
                {{ reSend }} {{ count }}</el-button>
            <el-button type="primary" @click="register()">注册</el-button>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
import { ElMessage } from 'element-plus';
import { useStore } from 'vuex';
import router from '@/router';
export default {
    name: "registerView",
    setup() {
        let email = ref("");
        let password = ref("");
        let confirmPassword = ref("");
        let name = ref("");
        let reSend = ref("发送验证码");
        let count = ref("");
        let code = ref("");
        const store = useStore();

        let send = () => {
            if (password.value != confirmPassword.value && password.value != "") {
                ElMessage({
                    message: '两次输入密码不一致',
                    type: 'error',
                    plain: true,
                })
                return;
            }
            if (name.value == "" || email.value == "") {
                ElMessage({
                    message: '用户名或邮箱为空',
                    type: 'error',
                    plain: true,
                })
                return;
            }
            reSend.value = "重新发送验证码";
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3000/userHandle/register/",
                data: {
                    email: email.value,
                    name: name.value,
                    password: password.value
                },
                success(resp) {
                    console.log(resp);
                    if (resp.state == "error") {
                        ElMessage({
                            message: '用户名已存在',
                            type: 'error',
                            plain: true,
                        })
                    }
                }, error() {
                    ElMessage({
                        message: '请检查邮箱格式',
                        type: 'error',
                        plain: true,
                    })
                }
            });
            count.value = 60;
            const timer = setInterval(
                function () {
                    if (count.value > 0)
                        count.value--;
                    else {
                        clearInterval(timer);
                        count.value = '';
                        reSend.value = "发送验证码";
                    }
                }
                , 1000);
        }
        let register = () => {
            if (password.value != confirmPassword.value && password.value != "") {
                ElMessage({
                    message: '两次输入密码不一致',
                    type: 'error',
                    plain: true,
                })
                return;
            }
            if (name.value == "" || email.value == "") {
                ElMessage({
                    message: '用户名或邮箱为空',
                    type: 'error',
                    plain: true,
                })
                return;
            }
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3000/userHandle/registerCode/",
                cache: false,
                async: false,
                data: {
                    email: email.value,
                    name: name.value,
                    password: password.value,
                    code: code.value,
                },
                success(resp) {
                    if (resp.state == "error") {
                        ElMessage({
                            message: '验证码错误',
                            type: 'error',
                            plain: true,
                        })
                    } else {
                        let t = ref({
                            name: name.value,
                            token: resp.token,
                        });
                        store.dispatch("login", t.value);
                        router.push({ path: "/infoShow/" });
                    }
                }, error() {
                    ElMessage({
                        message: '请检查邮箱格式',
                        type: 'error',
                        plain: true,
                    })
                }
            });
        }
        return {
            send,
            register,

            code,
            count,
            reSend,
            name,
            confirmPassword,
            email,
            password,
        }
    }
}
</script>

<style scoped>
div {
    margin: auto;
    width: 50%;
    font-size: large;
}

span:hover {
    color: red;
    cursor: pointer;
}
</style>